<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>管理员列表</title>
    <link rel="stylesheet" type="text/css" th:href="@{/manager/easyui/themes/default/easyui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/manager/easyui/themes/icon.css}">
    <script type="text/javascript" th:src="@{/manager/easyui/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/manager/easyui/jquery.easyui.min.js}"></script>
    <script type="text/javascript">
        //工具栏
        var toolbar = [{
            text: '新增',
            iconCls: 'icon-add',
            handler: function () {
                $('#dd').dialog({
                    title: "添加管理员"
                });
                $("#id").parent().hide();
                $("#name").textbox('setValue', '');
                $("#password").textbox('setValue', '');
                $("#supplier").combobox('setValue', '');
                $('#addOrModify').val("add");
                clearTree($("#ah"));
                $('#dd').dialog('open');
            }
        }, '-', {
            text: '修改',
            iconCls: 'icon-edit',
            handler: function () {
                $('#dd').dialog({
                    title: "修改管理员信息"
                });
                let selected = $('#managerlist').datagrid('getSelected');
                console.log(selected)
                if (!selected) {
                    alert("请选择待修改的管理员");
                } else {
                    $('#addOrModify').val("modify");
                    $("#id").parent().show();
                    clearTree($("#ah"));
                    $("#id").textbox("setValue", selected.id);
                    $("#name").textbox("setValue", selected.username);
                    if (selected.supplier != null) {
                        $("#supplier").combobox('setValue', selected.supplier.id);
                    } else {
                        $("#supplier").combobox('setValue', "");
                    }
                    let roles = selected.roles;
                    for (const role of roles) {
                        let node = $('#ah').tree('find', role.id);
                        $('#ah').tree('check', node.target);
                    }
                    $('#dd').dialog('open');
                }
            }
        }];
        $(function () {
            $('#managerlist').datagrid({
                title: '管理员列表',
                iconCls: 'icon-save',
                url: "/manager/manager/findAll",
                columns: [
                    [
                        {field: 'supplier', hidden: true},
                        {field: 'id', title: '管理员ID', width: 100, align: 'center'},
                        {field: 'username', title: '管理员名称', width: 200, align: 'center'},
                        {field: 'password', title: '管理员密码', width: 400, align: 'center'},
                        {field: 'roles', title: '拥有的角色', width: 200, align: 'center', formatter: format}
                    ]
                ],
                pagination: true,
                toolbar: toolbar,
                pageSize: 5,
                singleSelect: true,
                pageList: [5, 10, 20]
            });
            //初始化查询栏
            $("#submit_search").linkbutton({iconCls: 'icon-search', plain: true})
                .click(function () {
                    $('#managerlist').datagrid({
                        queryParams:
                            {
                                "managernameKey": $("#managernameKey").val()
                            }
                    });   //点击搜索
                });

            //初始化添加修改窗口
            $('#dd').dialog({
                width: 800,
                height: 500,
                closed: true,
                cache: false,
                href: '',
                modal: true,
                iconCls: 'icon-save',
                buttons: [{
                    text: '提交',
                    iconCls: 'icon-ok',
                    handler: function () {
                        let url = $("#addOrModify").val() === "add" ? "/manager/manager/add" : "/manager/manager/modify";
                        let nodes = $('#ah').tree('getChecked');
                        let roles = [];
                        for (let i = 0; i < nodes.length; i++) {
                            roles.push(nodes[i].id);
                        }
                        $.ajax({
                            url: url,
                            data: {
                                "roles": roles,
                                "username": $("#name").val(),
                                "supplierId": $("#supplier").combobox('getValue'),
                                "password": $("#password").val(),
                                "id": $("#id").val(),
                            },
                            type: "post",
                            dataType: "json",
                            success: function (data) {
                                if (data.status !== 2001) {
                                    $('#dd').dialog('close');
                                    alert(data.msg);
                                } else {
                                    $('#dd').dialog('close');
                                    $('#managerlist').datagrid('reload');
                                }
                            }
                        });
                    }
                }, {
                    text: '关闭',
                    handler: function () {
                        $('#dd').dialog('close');
                    }
                }]
            });

            //tree选项框初始化
            $("#ah").tree({
                url: "/manager/role/findRoletree",
                method: 'post',
                animate: true,
                checkbox: true
            });


            //初始化下拉控件
            $("#supplier").combobox({
                url: "/manager/supplier/findAllNoPages",
                prompt: '请选择供应商',
                value: "",
                valueField: "id",
                textField: "name"
            });

        });


        //列格式化方法
        function format(val, row) {
            let sel = "<select name='search_type' style='width:100%'>";
            for (let i = 0; i < val.length; i++) {
                sel += "<option>" + val[i].name + "</option>"
            }
            return sel;
        }

        function clearTree(_tree) {
            const roots = _tree.tree('getRoots');
            for (let i = 0; i < roots.length; i++) {
                let node = _tree.tree('find', roots[i].id);
                _tree.tree('uncheck', node.target);
            }
        }
    </script>
</head>
<body>
<form name="searchform" method="post" action="" id="searchform">
    <td width="70" height="30"><strong>管理员查询：</strong></td>
    <td height="30">
        <input type="text" name="managernameKey" id="managernameKey" size=20 placeholder="管理员名称"/>
        <a id="submit_search">搜索</a>
    </td>
</form>
<table id="managerlist"></table>
<div id="dd">
    <div align="center" style="margin-top: 30px">
        <form id="ff" method="post">
            <input type="hidden" id="addOrModify"/>
            <div style="margin-bottom:20px">
                <label for="supplier">管理员ID：</label>
                <input class="easyui-textbox" name="id" id="id" style="width:50%" readonly="readonly"/>
            </div>
            <div style="margin-bottom:20px">
                <label for="supplier">管理员密码：</label>
                <input class="easyui-textbox" type="password" name="password" id="password" style="width:50%"
                       data-options="required:true">
            </div>
            <div style="margin-bottom:20px">
                <label for="supplier">管理员名称：</label>
                <input class="easyui-textbox" name="name" id="name" style="width:50%"
                       data-options="required:true">
            </div>
            <div style="margin-bottom:20px">
                <label for="supplier">供应商名称：</label>
                <select class="easyui-combobox" name='supplier' id="supplier" style='width:50%;'>
                </select>
            </div>
            <div style="margin-bottom:20px">
                <table style="width:48%">
                    <td valign="top" style="width:150px">
                        角&emsp;色:
                    </td>
                    <td>
                        <ul id="ah"></ul>
                    </td>
                </table>
            </div>
        </form>
    </div>
</div>
</body>
</html>